<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="{{url_for('static', filename='img/0.jpg')}}" type="image/jpg">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2919685_v665bxckl5k.css">
    <link rel="stylesheet" href="{{url_for('static', filename='css/main.css')}}">
    {% block style %}
    {% endblock %}

    {% block head_js %}
    {% endblock %}

    <title>
        {% block title %}
        {% endblock %}
    </title>
</head>

<body>
    {% block header %}
    <header>
        <div class="msg-box">
            {% for category,message in get_flashed_messages(with_categories=True) %}
                <div class="msg  {{ category }}">
                    <div class="text">{{ message }}</div>
                </div>
            {% endfor %}
            <!-- animationend -->
            <script>
                let box = document.querySelector(".msg-box")
                box.addEventListener("animationend", function(){
                    box.remove()
                })
            </script>
        </div>
        <nav class="nav-top {% block nav_class %}{% endblock %}">
            <div id="logo">
                <a href="{{ url_for('views.index') }}">
                    {{site_config.get('name')}}
                </a>
            </div>
            <div class="menu">
                <i class="iconfont icon-menu"></i>
            </div>
            <div class="nav">
                <a href="{{ url_for('views.index') }}" class="item">首页</a>
                <a href="{{ url_for('views.list') }}" class="item">文章</a>
                <a href="{{ url_for('views.archives') }}" class="item">足迹</a>
                <a href="{{ url_for('views.links') }}" class="item">友链</a>
                <a href="{{ url_for('views.about') }}" class="item">关于</a>
            </div>
            <div class="search">
                <a href="#">
                    <i class="iconfont icon-31sousuo"></i>
                    <!-- <img src="./img/icon/搜索_填充.png" alt=""> -->
                </a>
                <div class="search-box ">
                    <div class="quit">
                        <a href="#">
                            关闭
                        </a>
                    </div>
                    <form action="./search">
                        <input required type="text" name="q" id="" placeholder="想要找点什么呢？">
                        <input type="submit" value="搜索">
                    </form>
                </div>
            </div>
        </nav>
        <div id="cd-top">
            <img src="{{ url_for('static', filename='img/f.png') }}" alt="">
        </div>
        {% block header_content %}
        {% endblock %}
    </header>
    {% endblock %}
    {% block main %}
    <main class="container">
        {% block main_content %}
        {% endblock %}
        {% block footer %}
        <footer>
            {{ site_config.get("footer") | safe }}
        </footer>
        {% endblock %}
        <div id="theme" class="hidden">
            <div class="text">
                select theme
            </div>
            <div class="theme-box">
                <a class="item" href="#" data-theme="default">default</a>
                <a class="item" href="#" data-theme="dark">dark</a>
                <a class="item" href="#" data-theme="bronya">bronya</a>
            </div>
        </div>
    </main>
    {% endblock %}
    

    {% block extra %}
    {% endblock %}

    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    {% block js %}

    {% endblock %}
</body>

</html>